<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../js/vue.js"></script>
  <script src="../js/jquery.min.js"></script>
  <script src="../js/axios.min.js"></script>
  <title>初始Vue</title>
</head>

<body>
  <div id="root">
    <h1>获取商品信息</h1>
    <input type="text" placeholder="输入商品id" v-model="goodsDetailReq.goodsId" />
    {{goodsDetailResp.title}}
    <ul>
      <li>商品名：{{goodsDetailResp.goodsName}}<li/>
        <li>商品图片：<img v-bind:src="goodsDetailResp.goodsImg"/><li/>
          <li>价格：{{goodsDetailResp.price}}￥<li/> 
          <a v-bind:href="goodsDetailResp.goodsImg">{{goodsDetailResp.goodsImg}}</a>
    </ul>
    <button @click="getList()">点我</button>
  </div>
</body>
<script>
  // http://localhost:8080/goods/rest/goodsDetail?goodsId=54628534
  let app = new Vue({
    el: '#root',
    data: {
      user: 123,
      name: '张三',
      list: [1, 3, 5, 7, 9],
      url: 'http://127.0.0.1/abc',
      goodsDetailReq: {
        goodsId: 54628534
      },
      goodsDetailResp: {
        title: "商品信息显示在这里",
        goodsName: '${商品名}',
        goodsImg: '${商品图片链接}',
        price: '${商品价格}'
      }
    },
    methods: {
      reName: () => {
        app.name = '李四'
      },
      getList: () => {
        $.ajax({
          type: 'get',
          url: `http://localhost:8080/goods/rest/goodsDetail`,
          data: {
            goodsId: app.goodsDetailReq.goodsId
          },
          success: (res) => {
            console.log(res);
            res=res.data.goods;
            let goodsDetailVO = app.goodsDetailResp;
            goodsDetailVO.goodsName=res.goodsName;
            goodsDetailVO.price=res.price;
            goodsDetailVO.goodsImg=res.goodsImg;
          },
          fail: (res) => {
            alert(res);
          }

        });

        // axios.get('http://localhost:8080/goods/rest/goodsDetail', {
        //     data:{
        //       goodsId: app.goodsDetailResp.goodsId
        //     }
        // })
        //   .then(function (response) {
        //     app.goodsDetailResp.result = response.data;
        //   })
        //   .catch(function (error) {
        //     console.log(error);
        //   });
      }
    }
  });






</script>

</html>